<template>
    <view class="container">
        <view>
            <navbar title="我的"></navbar>
        </view>
        <view class="setting">
            <view class="setting-btn">设置</view>
        </view>
        <view class="head">
            <view class="avatar-box">
                <u-avatar src="" mode="circle" @click="toLogin"></u-avatar>
            </view>
            <view class="head-info">
                <view class="head-info-user-name" @click="toLogin">{{userInfo==null?'未登录':userInfo.name}}</view>
                <view class="head-info-user-id">ID：<text>{{userInfo==null?"":userInfo.id}}</text></view>
            </view>
        </view>
        <view>
            <tabbar :current="1"></tabbar>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: null
            }
        },
        methods: {
            toLogin() {
                uni.navigateTo({
                    url: "/pages/login/index"
                })
            }
        },
        mounted() {
            if (uni.getStorageSync("userInfo")) {
                this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
            }
        }
    }
</script>

<style>
    .head {
        display: flex;
        background-color: #fff;
    }

    .avatar-box {
        padding: 0.5rem;
    }

    .setting {
        display: flex;
        background-color: #fff;
        padding: 0.3rem 0 0 0;
    }

    .setting-btn {
        border: 0.05rem solid #777;
        border-radius: 1rem;
        padding: 0.08rem 0.4rem;
        font-size: 0.7rem;
        margin-left: auto;
        margin-right: 0.7rem;
    }

    .head-info {
        padding: 0.5rem 0;
    }

    .head-info-user-name {
        padding: 0.2rem 0.1rem;
        font-weight: 700;
    }
</style>